<template>
  <div>
    <div style="margin-top: 15px;">
      <el-input placeholder="请输入内容"
                v-model="input"
                class="input-with-select">
        <el-select v-model="select"
                   slot="prepend"
                   placeholder="请选择">
          <el-option label="运单号"
                     value="waybill_number"></el-option>
          <el-option label="备注"
                     value="note"></el-option>
        </el-select>
        <el-button slot="append"
                   icon="el-icon-search"
                   @click="find()"></el-button>
        <el-button slot="append"
                   icon="el-icon-refresh"
                   @click="findAll()"></el-button>
      </el-input>
    </div>
    <el-table :data="tableData"
              border
              style="width: 100%">
      <el-table-column prop="waybill_number"
                       label="运单编号"
                       fixed="left"
                       width="200">
      </el-table-column>
      <el-table-column prop="freight"
                       label="运费"
                       width="70">
      </el-table-column>
      <el-table-column label="备注"
                       prop="note"
                       width="150">
      </el-table-column>
      <el-table-column label="搬运费"
                       prop="move_charges"
                       width="70">
      </el-table-column>
      <el-table-column label="重量"
                       prop="weight"
                       width="70">
      </el-table-column>
      <el-table-column label="距离"
                       prop="distance"
                       width="70">
      </el-table-column>
      <el-table-column label="货物价值"
                       prop="cargo_value"
                       width="70">
      </el-table-column>
      <el-table-column prop="date"
                       sortable
                       column-key="datetime"
                       label="开始时间"
                       width="200">
      </el-table-column>
      <el-table-column prop="estimated_time"
                       sortable
                       column-key="datetime"
                       label="预计到货时间"
                       width="200">
      </el-table-column>
      <el-table-column prop="move_service"
                       label="搬运服务"
                       width="70">
        <template slot-scope="scope">
          <span v-if="scope.row.move_service=== '1'">需要</span>
          <span v-if="scope.row.move_service=== '0'">不需要</span>
        </template>
      </el-table-column>
      <el-table-column prop="pay_type"
                       label="支付类型"
                       width="70">
        <template slot-scope="scope">
          <span v-if="scope.row.pay_type=== '1'">网上支付</span>
          <span v-if="scope.row.pay_type=== '0'">货到付款</span>
        </template>
      </el-table-column>
      <el-table-column prop="status"
                       label="状态"
                       width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.status=== '1'">已达运单</span>
          <span v-if="scope.row.status=== '0'">未达运单</span>
        </template>
      </el-table-column>
      <el-table-column label="操作"
                       width="200"
                       fixed="right">
        <template slot-scope="scope">
          <span v-if="scope.row.status != '0'">
            <el-button size="mini"
                       type="danger"
                       round
                       icon="el-icon-delete"
                       @click="del(scope.$index, scope.row)">删除</el-button>
          </span>
          <span v-if="scope.row.status=== '0'">
            <el-button size="mini"
                       type="danger"
                       round
                       icon="el-icon-delete"
                       @click="del(scope.$index, scope.row)">删除</el-button>
            <el-button size="mini"
                       type="success"
                       round
                       icon="el-icon-edit"
                       @click="updatePrem(scope.$index, scope.row)">修改</el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background
                   layout="prev, pager, next,sizes"
                   :total="total"
                   :page-sizes=[5,10,30,50]
                   page-size="5"
                   @current-change="tiao"
                   @prev-click="syy"
                   @next-click="xyy"
                   @size-change="ydx">
    </el-pagination>
    <el-button type="success"
               fixed="right"
               round
               @click="
               updatePrem()">新增货运单</el-button>
    <el-dialog :title="title"
               fullscreen="true"
               center="true"
               :visible.sync="editFormVisible"
               width="95%"
               @click="closeDialog">
      <el-form label-width="120px"
               :model="editForm"
               ref="editForm">
        <el-form-item label="发货者编号">
          <el-input size="small"
                    v-model="editForm.fusernumber"
                    auto-complete="off"
                    style="width:150px"
                    placeholder="请输入发货客户编号"></el-input>
        </el-form-item>
        <el-form-item label="发货客户">
          <el-input size="small"
                    v-model="editForm.fusername"
                    auto-complete="off"
                    style="width:150px"
                    placeholder="请输入发货者姓名"></el-input>
        </el-form-item>
        <el-form-item label="发货电话">
          <el-input size="small"
                    v-model="editForm.fphone"
                    auto-complete="off"
                    style="width:150px"
                    placeholder="请输入发货者电话"></el-input>
        </el-form-item>
        <el-form-item label="发货地址">
          <el-input size="small"
                    v-model="editForm.faddress"
                    @change="fchange(editForm.faddress)"
                    auto-complete="off"
                    style="width:150px"
                    placeholder="请输入发货者地址"></el-input>
        </el-form-item>
        <el-form-item label="收货客户">
          <el-input size="small"
                    v-model="editForm.susername"
                    auto-complete="off"
                    style="width:150px"
                    placeholder="请输入收货者姓名"></el-input>
        </el-form-item>
        <el-form-item label="收货电话">
          <el-input size="small"
                    v-model="editForm.sphone"
                    auto-complete="off"
                    style="width:150px"
                    placeholder="请输入收货者电话"></el-input>
        </el-form-item>
        <el-form-item label="收货地址">
          <el-input size="small"
                    v-model="editForm.saddress"
                    @change="schange(editForm.saddress)"
                    auto-complete="off"
                    style="width:150px"
                    placeholder="请输入收货者地址"></el-input>
        </el-form-item>
        <el-form-item label="起点"
                      style="position: absolute;top:76px;left:300px">
          <img :src="img1">
        </el-form-item>
        <el-form-item label="终点"
                      style="position: absolute;top:76px;left:800px">
          <img :src="img2">
        </el-form-item>
        <el-form-item label="发货日期">
          <el-date-picker v-model="editForm.fdate"
                          type="datetime"
                          default-time="12:00:00"
                          :placeholder="f">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="付款方式">
          <el-radio v-model="editForm.paytype"
                    label="1">网上支付</el-radio>
          <el-radio v-model="editForm.paytype"
                    label="0">货到付款</el-radio>
        </el-form-item>
        <el-form-item label="搬运服务"
                      style="position: absolute;left:400px;top:478px">
          <el-radio v-model="editForm.ismove"
                    label="1">需要</el-radio>
          <el-radio v-model="editForm.ismove"
                    label="0">不需要</el-radio>
        </el-form-item>
        <el-form-item label="是否含易碎"
                      style="position: absolute;left:720px;top:478px">
          <el-radio v-model="editForm.isfragile"
                    label="1">含</el-radio>
          <el-radio v-model="editForm.isfragile"
                    label="0">不含</el-radio>
        </el-form-item>
        <el-form-item label="返款类型"
                      style="position: absolute;left:1000px;top:478px">
          <el-radio v-model="editForm.rtp"
                    label="1">即日退</el-radio>
          <el-radio v-model="editForm.rtp"
                    label="0">无业务</el-radio>
        </el-form-item>
        <el-form-item label="减款(元)">
          <el-input size="small"
                    v-model="editForm.jiankuan"
                    auto-complete="off"
                    style="width:150px"
                    placeholder="请输入减款数目"></el-input>
        </el-form-item>
        <el-form-item label="体积(m²)">
          <el-input size="small"
                    v-model="editForm.tiji"
                    auto-complete="off"
                    style="width:150px"
                    placeholder="请输入货物总体积"></el-input>
        </el-form-item>
        <el-form-item label="重量(kg)">
          <el-input size="small"
                    v-model="editForm.weight"
                    auto-complete="off"
                    style="width:150px"
                    placeholder="请输入货物总重量"></el-input>
        </el-form-item>
        <el-form-item label="备注"
                      style="position: absolute;left:300px;top:530px">
          <el-input type="textarea"
                    :autosize="{ minRows: 6, maxRows: 8}"
                    placeholder="请输入备注"
                    v-model="editForm.note">
          </el-input>
        </el-form-item>
        <el-form-item style="position: absolute;left:500px;top:530px">
          <el-input placeholder="距离"
                    readonly="true"
                    v-model="editForm.distance">
          </el-input>
          <el-input placeholder="时间"
                    readonly="true"
                    editable="false"
                    v-model="editForm.time">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button size="small"
                   @click="closeDialog">取消</el-button>
        <el-button size="small"
                   type="primary"
                   class="title"
                   @click="submitForm('editForm')">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [],
      userid: '',
      editFormVisible: false, //控制编辑页面显示与隐藏
      title: '新增货运单',
      editForm: {
        fusername: "",
        fusernumber: "",
        faddress: "",
        fphone: "",
        susername: "",
        sphone: "",
        saddress: "",
        fdate: "",
        paytype: "1",
        ismove: "0",
        jiankuan: "",
        weight: "",
        tiji: "",
        isfragile: "0",
        note: "",
        distance: "",
        time: "",
        flag: "",
        freightid: "",
        rtp: "0"
      },
      total: 1000,
      pageSize: 5,
      currentPage: "1",
      img1: "",
      img2: "",
      flocation: "",
      slocation: "",
      input: "",
      select: "",
      f: "请选择发货时间"

    }
  },
  created () {
    this.getdata()
  },
  inject: ["refresh"],
  methods: {
    getdata () {
      this.$axios.get("/api/freight/all/" + this.currentPage + "/" + this.pageSize).then(res => {
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
      })
    },
    closeDialog () {
      this.editFormVisible = false
      this.getdata()
    },
    updatePrem: function (index, row) {
      this.editFormVisible = true
      if (row != undefined && row != 'undefined') {
        this.title = '修改货运单'
        this.editForm.flag = "revise"
        this.$axios.get("/api/freight/update/" + row.waybill_number).then(res => {
          this.editForm.freightid = res.data.data.freightBill.waybill_number
          this.editForm.fusername = res.data.data.fuser.userName;
          this.editForm.fusernumber = "9527"
          this.editForm.faddress = res.data.data.freightBill.faddress
          this.fchange(this.editForm.faddress)
          this.editForm.fphone = res.data.data.fuser.phone
          this.editForm.susername = res.data.data.suser.userName
          this.editForm.sphone = res.data.data.suser.phone
          this.editForm.saddress = res.data.data.freightBill.saddress
          this.editForm.fdate = res.data.data.freightBill.date
          this.editForm.paytype = res.data.data.freightBill.pay_type
          this.editForm.ismove = res.data.data.freightBill.move_service
          this.editForm.jiankuan = 0
          this.editForm.weight = res.data.data.freightBill.weight
          this.editForm.tiji = res.data.data.freightBill.volume;
          this.editForm.isfragile = res.data.data.freightBill.fragile
          this.editForm.note = res.data.data.freightBill.note
          this.schange(this.editForm.saddress)
        })
      } else {
        this.title = '新增货运单'
        this.editForm.flag = 'add'
      }
    },
    submitForm (editData) {
      this.$refs[editData].validate(valid => {
        if (this.editForm.flag == "add") {
          this.$axios.post("/api/freight/add", this.editForm).then(res => {
            console.log(res, "添加操作");
            this.editFormVisible = false;
            this.getdata()
          })

        }
        if (this.editForm.flag == "revise") {
          this.$axios.post("/api/freight/update2", this.editForm).then(res => {
            console.log(res, "添加操作");
            this.editFormVisible = false;
            this.editForm.freightid = ""
            this.editForm.fusername = ""
            this.editForm.fusernumber = ""
            this.editForm.faddress = ""
            this.editForm.fphone = ""
            this.editForm.susername = ""
            this.editForm.sphone = ""
            this.editForm.saddress = ""
            this.editForm.fdate = ""
            this.editForm.paytype = ""
            this.editForm.ismove = ""
            this.editForm.jiankuan = 0
            this.editForm.weight = ""
            this.editForm.tiji = ""
            this.editForm.isfragile = ""
            this.editForm.note = ""
            this.getdata()
          })
        }

      })
    },
    tiao (res) {
      this.currentPage = res;
      this.getdata()
    },
    syy (res) {
      this.currentPage = res;
    },
    xyy (res) {
      this.currentPage = res;
    },
    ydx (res) {
      this.pageSize = res;
    },
    del (index, row) {
      this.$axios.delete("/api/freight/del/" + row.id).then(res => {
        this.getdata()
      });
    },
    add () {
      this.editFormVisible = true
    },
    // gaode () {
    //   this.$axios.get("/v1/staticmap?location=104.063919,30.573687&zoom=10&size=380*380&markers=mid,,A:104.063919,30.573687&key=5f9d23fee2fcd5f59863c1c7596883cd", { responseType: 'arraybuffer' }).then(data => {
    //     console.log(data.data);
    //     let imgUrl = 'data:image/png;base64,' + btoa(new Uint8Array(data.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
    //     this.img1 = imgUrl
    //     this.img2 = imgUrl
    //     this.$axios.get("/v1/place/text?keywords=成都孵化园&key=5f9d23fee2fcd5f59863c1c7596883cd").then(res => {
    //     })
    //     this.$axios.get("/v1/distance?origins=104.063919,30.573687&destination=104.077774,30.655544&output=json&key=5f9d23fee2fcd5f59863c1c7596883cd").then(res => {
    //       console.log(res);
    //       this.distance = (res.data.results[0].distance) / 1000 + "公里"
    //     });
    //   });

    // },
    fchange (value) {
      this.$axios.get("/v1/place/text?keywords=" + value + "&key=5f9d23fee2fcd5f59863c1c7596883cd").then(res => {
        this.flocation = res.data.pois[0].location;
        this.$axios.get("/v1/staticmap?location=" + this.flocation + "&zoom=10&size=380*380&markers=mid,,A:" + this.flocation + "&key=5f9d23fee2fcd5f59863c1c7596883cd", { responseType: 'arraybuffer' }).then(data => {
          let imgUrl = 'data:image/png;base64,' + btoa(new Uint8Array(data.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
          this.img1 = imgUrl
        });
      })
    },
    schange (value) {
      console.log(value);
      this.$axios.get("/v1/place/text?keywords=" + value + "&key=5f9d23fee2fcd5f59863c1c7596883cd").then(res => {
        this.slocation = res.data.pois[0].location;
        this.$axios.get("/v1/staticmap?location=" + this.slocation + "&zoom=10&size=380*380&markers=mid,,A:" + this.slocation + "&key=5f9d23fee2fcd5f59863c1c7596883cd", { responseType: 'arraybuffer' }).then(data => {
          let imgUrl = 'data:image/png;base64,' + btoa(new Uint8Array(data.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
          this.img2 = imgUrl
        });
        this.$axios.get("/v1/distance?origins=" + this.flocation + "&destination=" + this.slocation + "&output=json&key=5f9d23fee2fcd5f59863c1c7596883cd").then(res => {
          this.editForm.distance = "距离:" + ((res.data.results[0].distance) / 1000).toFixed(2) + "公里"
          this.editForm.time = "预计用时:" + ((res.data.results[0].duration) / 3600).toFixed(2) + "小时"
        });
      })
    },
    find () {
      console.log(this.select, this.input);
      if (this.select == "") {
        alert("请选择查询的内容")
      }
      this.$axios.post("/api/freight/find/" + this.currentPage + "/" + this.pageSize + "/" + this.select + "/" + this.input).then(res => {
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
      })
    },
    findAll () {
      this.select = ""
      this.input = ""
      this.getdata()
    }
  }
}
</script>
